<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>床位管理</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <el-table
      @row-click="onRowClick"
      class="tableBox"
      ref="tables"
      v-loading="loadingShow"
      element-loading-text="数据正在加载中..."
      :data="tableData"
      border
      @cell-click="handle"
      :header-cell-class-name="cellClass"
      @select="handleRow"
      @header-click="tableHeader"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
      :height="tabHeight"
      :header-cell-style="{background:'#1da4f2',color:'#fff', textAlign:'center'}"
      style="width: 100%;font-size: 15px">
      <div slot="empty">
        <div>
          <img src="../../../assets/空两本书.png" alt="" width="140" height="140" />
        </div>
        <p :style="{'marginTop': '5px'}">暂无床位记录</p>
      </div>
      <el-table-column
        fixed
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column
        prop="room_no"
        label="房间号"
        width="100"
        :formatter="if_null"
        :render-header="renderHeader"
      >
<!--        :filters="roomlist"-->
<!--        :filter-method="filterTag"-->
        <template slot-scope="scope">
          <div >
            <el-input size="small"
                      @blur="handleInputBlur(scope.row)"
                      :readonly="scope.row.status == 2"
                      v-model="scope.row.room_no"
                      placeholder="请输入房间号"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="bed_no"
        label="床号"
        width="100"
        :formatter="if_null"
        :render-header="renderHeader"
      >
<!--        :filters="bedlist"-->
<!--        :filter-method="filterTag"-->
        <template slot-scope="scope">
          <div >
            <el-input size="small"
                      :readonly="scope.row.status == 2"
                      @blur="handleInputBlur(scope.row)"
                      v-model="scope.row.bed_no"
                      placeholder="请输入床号"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="patient_name"
        label="入驻人员"
        width="120"
        :formatter="if_null"
        :render-header="renderHeader"
      >
<!--        :filters="patientlist"-->
<!--        :filter-method="filterTag"-->
        <template slot-scope="scope">
          {{scope.row.patient_name ? scope.row.patient_name : '请选择'}}
          <a class="van-dropdown-menu__title"></a>
        </template>
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别属性"
        width="120"
        :formatter="if_null"
        :render-header="renderHeader"
      >
<!--        :filters="sexlist"-->
<!--        :filter-method="filterTag"-->
        <template slot-scope="scope">
          {{scope.row.sex == 1 ? '只限男性' : scope.row.sex == 2 ? '只限女性' : scope.row.sex == 3 ? '男女不限' : '请选择' }}
          <a class="van-dropdown-menu__title"></a>
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        label="价格"
        width="100"
        :formatter="if_null"
        :render-header="renderHeader"
      >
<!--        :filters="amountlist"-->
<!--        :filter-method="filterTag"-->
        <template slot-scope="scope">
          <div >
            <el-input size="small"
                      :readonly="scope.row.status == 2"
                      @blur="handleInputBlur(scope.row)"
                      v-model="scope.row.amount"
                      placeholder="请输入"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="80"
        :formatter="if_null"
        align="center"
        :render-header="renderHeader"
      >
<!--        :filters="statuslist"-->
<!--        :filter-method="filterTag"-->
        <template slot-scope="scope">
          {{scope.row.status == 1 ? '开放' : scope.row.status == 2 ? '不开放': '空'}}
        </template>
      </el-table-column>
    </el-table>
    <div class="keepBottom" >
      <button @click="add">新增</button>
      <button @click="deleteBtn">
        {{selectList[0] && selectList[0].status == 2 ? '启用' : '禁用'}}
      </button>
    </div>
    <van-action-sheet
      @select="selectSex"
      v-model="sexShow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="sexShow = false"
    />
    <van-popup v-model="patientShow"
               round position="bottom"
               :style="{ height: '80%', bottom: isShowtabbar ?  '0px' : '50px' }" >
      <div class="popHeader">
        <div class="div" @click="patientShow = false" style="color: #999999">取消</div>
        <div class="div">选择入驻人员</div>
        <div class="div solid" @click="fenPeiConfirm()">确认</div>
      </div>
      <ul class="popUl">
        <li :class="Now_patientsInfo.value == item.value ? 'selectPatien' : ''"
            @click="Now_patientsInfo = item"
            v-for="(item, index) in this.row.optionPatient"
            :key="index">
          {{item.text}}
          <img v-show="Now_patientsInfo.value == item.value" src="../../../assets/selectImg/选择蓝@2x.png" style="width: 13px;height: 8px;" alt="">
        </li>
      </ul>
    </van-popup>
    <van-dialog v-model="cancelShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="`确认` + (selectList.length > 0 && selectList[0].status == 1 ? '禁用' : '启用') +`吗？`"
                @confirm="deleteConfirm()"
                show-cancel-button>
    </van-dialog>
    <pop_select :show="roomShow"
                title="选择房间号"
                height="70%"
                @confirmMethod="filter"
                @close="roomShow = false"
                :dataList="roomlist">
    </pop_select>
    <pop_select :show="bedShow"
                title="选择床号"
                height="70%"
                @confirmMethod="filter"
                @close="bedShow = false"
                :dataList="bedlist">
    </pop_select>
    <pop_select :show="patient_selectShow"
                title="选择入驻人员"
                height="70%"
                @confirmMethod="filter"
                @close="patient_selectShow = false"
                :dataList="patientlist">
    </pop_select>
    <pop_select :show="sex_selectShow"
                title="选择性别属性"
                height="70%"
                @confirmMethod="filter"
                @close="sex_selectShow = false"
                :dataList="sexlist">
    </pop_select>
    <pop_select :show="amountShow"
                title="选择金额"
                height="70%"
                @confirmMethod="filter"
                @close="amountShow = false"
                :dataList="amountlist">
    </pop_select>
    <pop_select :show="statusShow"
                title="选择状态"
                height="70%"
                @confirmMethod="filter"
                @close="statusShow = false"
                :dataList="statuslist">
    </pop_select>
  </div>
</template>

<script>
import PopSelect from '../../../components/Vue/PopSelect'

export default {
  name: 'BedManagement',
  components: {
    pop_select: PopSelect
  },
  data () {
    return {
      tableData: [],
      loadingShow: true,
      team_id: this.$route.query.team_id,
      row: [],
      sexShow: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ name: '只限男性', value: '1' }, { name: '只限女性', value: '2' }, {name: '男女不限', value: '3'}],
      optionPatient: [],
      patientShow: false,
      Now_patientsInfo: {},
      selectList: [],
      cancelShow: false,
      // 价格
      amountlist: [],
      // 床位
      bedlist: [],
      // 患者
      patientlist: [],
      // 房间
      roomlist: [],
      // 性别
      sexlist: [],
      // 状态
      statuslist: [],
      rowIndex: '',
      isShowtabbar: sessionStorage.getItem('isShowtabbar'),
      statusShow: false,
      roomShow: false,
      bedShow: false,
      patient_selectShow: false,
      sex_selectShow: false,
      amountShow: false,
    }
  },
  computed: {
    tabHeight () {
      let title = ''
      if (this.isShowtabbar) {
        title = 'calc(100vh - 44px  - 60px)'
      } else {
        title = 'calc(100vh - 44px - 60px - 50px)'
      }
      return title
    }
  },
  mounted () {
    this.$toast({
      message: '向左滑动查看更多',
      icon: 'like-o'
    })
    // 获取列表
    this.getBedList()
  },
  methods: {
    filter () {
      this.loadingShow = true
      let bed_no = '' // 床位
      let room_no = '' // 房间号
      let sex = '' // 性别
      let patient_user_id = '' // 患者
      let amount = '' // 金额
      let status = '' // 状态
      this.bedlist.forEach((curr) => {
        if (curr.select === true) {
          bed_no += curr.value + ','
        }
      })
      this.roomlist.forEach((curr) => {
        if (curr.select === true) {
          room_no += curr.value + ','
        }
      })
      this.sexlist.forEach((curr) => {
        if (curr.select === true) {
          sex += curr.value + ','
        }
      })
      this.patientlist.forEach((curr) => {
        if (curr.select === true) {
          patient_user_id += curr.value + ','
        }
      })
      this.amountlist.forEach((curr) => {
        if (curr.select === true) {
          amount += curr.value + ','
        }
      })
      this.statuslist.forEach((curr) => {
        if (curr.select === true) {
          status += curr.value + ','
        }
      })

      bed_no = bed_no.substring(0, bed_no.length - 1)
      room_no = room_no.substring(0, room_no.length - 1)
      sex = sex.substring(0, sex.length - 1)
      patient_user_id = patient_user_id.substring(0, patient_user_id.length - 1)
      amount = amount.substring(0, amount.length - 1)
      status = status.substring(0, status.length - 1)
      this.$http.listByCon({
        team_id: this.team_id,
        bed_no: bed_no,
        room_no: room_no,
        sex: sex,
        patient_user_id: patient_user_id,
        status: status,
        amount: amount
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.tableData = res.data.data.list
            this.loadingShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    tableHeader (column, event) {
      if (column.property === 'room_no') {
        this.roomShow = true
      } else if (column.property === 'bed_no') {
        this.bedShow = true
      } else if (column.property === 'patient_name') {
        this.patient_selectShow = true
      } else if (column.property === 'sex') {
        this.sex_selectShow = true
      } else if (column.property === 'amount') {
        this.amountShow = true
      } else if (column.property === 'status') {
        this.statusShow = true
      }
    },
    renderHeader (h, {column}) { // h即为cerateElement的简写，具体可看vue官方文档
      return h(
        'span',
        [
          h('span', column.label),
          h('i', {
            class: 'el-icon-arrow-down',
            style: 'color:#fff;margin-left:5px;'
          })
        ]
      )
    },
    onRowClick (row, event, column) {
      // 点击获取索引
      this.rowIndex = row.index
    },
    filterTag (value, row, column) {
      let isTrue = false
      let prop = column.property
      if (row[prop] == value) {
        isTrue = true
      }
      return isTrue
    },
    // 取消或启用
    deleteConfirm () {
      let row = this.selectList[0]
      let status = ''
      if (row.status == 1) {
        status = '2'
      } else if (row.status == 2) {
        status = '1'
      }
      this.$http.miniTeamBedsave({
        id: row.id.toString(),
        team_id: this.team_id.toString(),
        status: status
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getBedList()
            this.cancelShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击禁用按钮
    deleteBtn () {
      if (this.selectList[0].patient_user_id) {
        this.$toast('请先取消入驻人员')
        return false
      } else if (!this.selectList[0].id) {
        this.$toast('请先维护此条数据')
        return false
      } else {
        this.cancelShow = true
      }
    },
    // 判断是否是禁用
    tableRowClassName ({row, rowIndex}) {
      row.index = rowIndex
      if (row.status == 1) { // 正常
        return 'success-row'
      } else if (row.status == 2) { // 废弃
        return 'warning-row'
      }
      return ''
    },
    // 选中的项
    handleSelectionChange (val) {
      this.selectList = val
    },
    handleRow (selection, row) {
      // 先清除所有选中的
      this.$refs.tables.clearSelection()
      // 当前的点击实现勾选
      this.$refs.tables.toggleRowSelection(row)
    },
    // 给全选加class
    cellClass (row) {
      if (row.columnIndex == 0) {
        return 'disabledCheck'
      }
    },
    // 患者选择确认按钮
    fenPeiConfirm () {
      this.row.patient_user_id = this.Now_patientsInfo.value
      this.row.patient_name = this.Now_patientsInfo.text
      this.patientShow = false
      this.save()
    },
    // 选择性别
    selectSex (action, index) {
      this.row.sex = action.value
      this.save()
    },
    // 更改患者
    changePaitent (val) {
      this.row.optionPatient.forEach((curr, index) => {
        if (curr.value == val) {
          this.row.patient_user_id = val
        }
      })
      this.save()
    },
    // 获取患者
    getPaitents () {
      this.optionPatient = []
      this.$http.listPatientManage({team_id: this.team_id, bed_sex: this.row.sex.toString()})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            res.data.data.forEach((curr, index) => {
              let obj = {
                text: curr.name,
                value: curr.USER_ID
              }
              this.optionPatient.push(obj)
            })
            let key = {
              text: '空',
              value: '-1'
            }
            this.optionPatient.unshift(key)
            let row = this.row
            if (row.optionPatient) { // 存在直接改数据
              this.row.optionPatient = this.optionPatient
            } else { // 不存在 set进去
              let list = JSON.stringify(this.optionPatient)
              this.$set(row, 'optionPatient', JSON.parse(list))
            }
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    if_null (row, column) {
      let cellprop = column.property
      let text = ''
      if (row[cellprop]) {
        if (column.property == 'sex') {
          text = (row.sex == 1 ? '只限男性' : row.sex == 1 ? '只限女性' : row.sex == 3 ? '男女不限' : '')
        } else if (column.property == 'status') {
          text = (row.status == 1 ? '开放' : row.status == 2 ? '不开放' : '')
        } else {
          text = row[cellprop]
        }
      } else {
        return '请选择'
      }
      return text
      // return row[cellprop] ? row[cellprop] :
    },
    // 失去焦点事件
    handleInputBlur (row) {
      let dataRow = JSON.parse(JSON.stringify(row))
      this.save(dataRow)
    },
    // 获取床位列表
    getBedList () {
      this.loadingShow = true
      // 价格
      this.amountlist = []
      // 床位
      this.bedlist = []
      // 患者
      this.patientlist = []
      // 房间
      this.roomlist = []
      // 性别
      this.sexlist = []
      // 状态
      this.statuslist = []
      this.$http.listByCon({team_id: this.team_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.tableData = res.data.data.list
            /*   this.tableData.forEach((curr, index) => {
              if (curr.id == this.row.id) {
                curr.id = this.row.id
                curr.room_no = this.row.room_no
                curr.bed_no = this.row.bed_no
                curr.patient_user_id = this.row.patient_user_id
                curr.sex = this.row.sex
                curr.amount = this.row.amount
                curr.status = this.row.status
              }
            }) */
            let selectlist = res.data.data.selectlist
            // 价格
            selectlist.amountlist.forEach((curr, index) => {
              let key = {
                value: curr.amount,
                text: curr.amount + '元'
              }
              this.amountlist.push(key)
            })
            // 床位
            selectlist.bedlist.forEach((curr, index) => {
              let key = {
                value: curr.bed_no,
                text: curr.bed_no
              }
              this.bedlist.push(key)
            })
            // 患者
            selectlist.patientlist.forEach((curr, index) => {
              let key = {
                value: curr.patient_user_id,
                text: curr.patient_name
              }
              this.patientlist.push(key)
            })
            // 房间
            selectlist.roomlist.forEach((curr, index) => {
              let key = {
                value: curr.room_no,
                text: curr.room_no
              }
              this.roomlist.push(key)
            })
            // 性别
            selectlist.sexlist.forEach((curr, index) => {
              let key = {
                value: curr.sex,
                text: (curr.sex == 1 ? '只限男性' : curr.sex == 2 ? '只限女性' : curr.sex == 3 ? '男女不限' : '')
              }
              this.sexlist.push(key)
            })
            // 状态
            selectlist.statuslist.forEach((curr, index) => {
              let key = {
                value: curr.status,
                text: (curr.status == 1 ? '开放' : curr.status == 2 ? '不开放' : '')
              }
              this.statuslist.push(key)
            })
            this.loadingShow = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 新增
    add () {
      if (this.tableData.length <= 0 || (this.tableData.length > 0 && this.tableData[this.tableData.length - 1].id)) {
      } else {
        this.$toast('请先维护上条数据')
        return false
      }
      let key = {
        id: '',
        team_id: this.team_id,
        room_no: '',
        bed_no: '',
        patient_user_id: '',
        sex: '',
        amount: '',
        status: ''
      }
      this.tableData.push(key)
    },
    save (nowRow) {
      this.loadingShow = true
      let row
      if (nowRow) {
        row = nowRow
      } else {
        row = this.row
      }
      this.$http.miniTeamBedsave({
        id: row.id ? row.id.toString() : '',
        team_id: this.team_id.toString(),
        room_no: row.room_no,
        bed_no: row.bed_no,
        patient_user_id: row.patient_user_id,
        sex: row.sex,
        amount: row.amount,
        status: row.status
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.loadingShow = false
            this.getBedList()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    handle (row, column, event, cell) {
      console.log(row)
      this.row = row
      if (this.row.status == 2) {
        this.$toast('请先启用床位')
        return false
      }
      if (column.property == 'sex') {
        this.sexShow = true
      } else if (column.property == 'patient_name') {
        if (row.room_no && row.bed_no) {
          this.getPaitents()
          this.patientShow = true
          this.Now_patientsInfo = {
            value: this.row.patient_user_id,
            text: this.row.patient_name
          }
        } else {
          this.$toast('请先输入房间号和床号')
          return false
        }
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.popHeader,
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.keepBottom{
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  position: sticky;
  bottom: 0px;
  button{
    width: 95%;
    height: 44px;
    border: 1px solid #1DA4F2;
    background: #FFFFFF;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    color: #1da4f2;
    margin: 0 10px;
  }
}
.popHeader{
  padding: 0 10px;
  box-sizing: border-box;
}
.popUl{
  li{
    padding: 0 10px;
    box-sizing: border-box;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
  }
}
.selectPatien{
  color: #1da4f2!important;
}

/deep/ .el-table .disabledCheck .cell::before{
  content: '选择';
  text-align: center;
  line-height: 37px;
}
/deep/ .el-checkbox__inner{
  border-radius: 50%;
}
/deep/ thead {
  .el-table-column--selection {
    .cell {
      .el-checkbox{
        display: none;
      }
    }
  }
}

/deep/ .el-table .warning-row {
  color: red !important;
}
/deep/ .el-table .warning-row input{
  color: red !important;
}
/deep/ .el-table .success-row {
  color: #333;
}
/deep/
.el-table th>.cell.highlight {
  color: #333333;
}
/deep/ .el-table__column-filter-trigger i{
  color: #fff;
}
/deep/ .van-dropdown-menu__title::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -5px;
  border: 3px solid;
  border-color: transparent transparent #333#333;
  -webkit-transform: rotate(
      -45deg
  );
  -ms-transform: rotate(-45deg);
  transform: rotate(
      -45deg
  );
  opacity: .8;
  content: '';
}
/deep/ .el-table__empty-text{
  left: auto;
}
</style>
